"use client";
import { useState, useEffect, useRef, useCallback } from 'react';
import { BadgePlus, Brush, Redo2, Reply, Volume1, Volume2 } from 'lucide-react';
import { useRouter } from '@/utils/router';

interface ReaderbarType {
    onClick: (type: string) => void;
    onPlay: (all: boolean, id: number) => void;
    allShelf: () => void;
    statusInfo: {
        openQuiz: boolean
    }
    bookInfo: {
        id: string, collect: boolean, quiz: boolean, audio: boolean
    }
}

export const Readerbar = ({ onClick, onPlay, allShelf, statusInfo, bookInfo }: ReaderbarType) => {
    const router = useRouter();
    const { openQuiz } = statusInfo
    const { collect } = bookInfo
    const [showNavbar, setShowNavbar] = useState(true); // 控制导航栏的显示/隐藏
    const lastScrollY = useRef(0); // 使用 useRef 存储滚动位置，避免重渲染时丢失状态
    const [isMuted, setIsMuted] = useState(false); // 控制是否静音的状态

    useEffect(() => {
        // 每秒切换一次状态
        const interval = setInterval(() => {
            setIsMuted((prev) => !prev); // 切换状态
        }, 1500);

        // 清理定时器
        return () => clearInterval(interval);
    }, []); // 空数组表示只在组件挂载时设置一次定时器
    const handleScroll = useCallback(() => {
        const currentScrollY = window.scrollY;

        if (currentScrollY > lastScrollY.current && showNavbar) {
            setShowNavbar(false); // 向下滚动 -> 隐藏导航栏
        } else if (currentScrollY < lastScrollY.current - 2 && !showNavbar) {
            setShowNavbar(true); // 向上滚动 -> 显示导航栏
        }

        lastScrollY.current = currentScrollY; // 更新上次滚动位置
    }, [showNavbar]); // 依赖于 showNavbar，避免不必要的状态更新

    useEffect(() => {
        window.addEventListener("scroll", handleScroll);

        return () => {
            window.removeEventListener("scroll", handleScroll);
        };
    }, [handleScroll]); // 依赖 handleScroll，确保事件监听器始终是最新的

    return (
        <nav
            className={`bg-[#f6f8f9] rounded-full text-black p-4 shadow-md fixed 
            inset-x-0 mx-auto w-[50%] max-w-[450px] m-5 transition-transform duration-300 
            ${showNavbar ? 'translate-y-0' : '-translate-y-[200%]'}`}
        >
            <ul className="flex justify-center items-center  w-full">
                <button onClick={
                    () => {
                        router.back()
                    }} className='hover:text-[#0285ff]'>
                    <li className='mx-1'>
                        <Reply />
                    </li>
                </button>
                <button onClick={() => onClick("quiz")} className='hover:text-[#0285ff]'>
                    <li className='mx-2'>
                        {openQuiz ? (<Brush color="#0285ff" />) : (<Brush />)}
                    </li>
                </button>
                <button className='hover:text-[#0285ff]' onClick={() => { onPlay(true, 0) }}>
                    <li className='mx-2'>
                        {bookInfo.audio ? (<> {isMuted ? <Volume1 /> : <Volume2 color="#0285ff" />}</>
                        ) : (
                            <Volume2 />
                        )}
                    </li>
                </button>
                <button onClick={allShelf} className='hover:text-[#0285ff]'>
                    <li className='mx-1' title={collect ? "已收藏" : "点击收藏"}>
                        {collect ? (<BadgePlus color="#0285ff" />) : (<BadgePlus />)}
                    </li>
                </button>

            </ul>
        </nav>


    );
};


